$(function () {

  'use strict';

  var console = window.console || { log: function () {} };
  var $image = $('#image');
  var $download = $('#download');
  var $dataX = $('#dataX');
  var $dataY = $('#dataY');
  var $dataHeight = $('#dataHeight');
  var $dataWidth = $('#dataWidth');
  var $dataRotate = $('#dataRotate');
  var $dataScaleX = $('#dataScaleX');
  var $dataScaleY = $('#dataScaleY');
  var options = {
        aspectRatio: 16 / 9,
        preview: '.img-preview',
        resizable: false,
        dragCrop: false,
        movable: false,
        crop: function (e) {
          $dataX.val(Math.round(e.x));
          $dataY.val(Math.round(e.y));
          $dataHeight.val(Math.round(e.height));
          $dataWidth.val(Math.round(e.width));
          $dataRotate.val(e.rotate);
          $dataScaleX.val(e.scaleX);
          $dataScaleY.val(e.scaleY);
        }
      };

// Cropper
  $image.on({
    'build.cropper': function (e) {
      console.log(e.type);
    },
    'built.cropper': function (e) {
      console.log(e.type);
    },
    'cropstart.cropper': function (e) {
      console.log(e.type, e.action);
    },
    'cropmove.cropper': function (e) {
      console.log(e.type, e.action);
    },
    'cropend.cropper': function (e) {
      console.log(e.type, e.action);
    },
    'crop.cropper': function (e) {
      console.log(e.type, e.x, e.y, e.width, e.height, e.rotate, e.scaleX, e.scaleY);
    },
    'zoom.cropper': function (e) {
      console.log(e.type, e.ratio);
    }
  }).cropper(options);

  // Tooltip
  // $('[data-toggle="tooltip"]').tooltip();


  // Cropper
  // $image.on({
  //   // 'build.cropper': function (e) {
  //   //   console.log(e.type);
  //   // },
  //   // 'built.cropper': function (e) {
  //   //   console.log(e.type);
  //   // },
  //   // 'cropstart.cropper': function (e) {
  //   //   console.log(e.type, e.action);
  //   // },
  //   // 'cropmove.cropper': function (e) {
  //   //   console.log(e.type, e.action);
  //   // },
  //   // 'cropend.cropper': function (e) {
  //   //   console.log(e.type, e.action);
  //   // },
  //   // 'crop.cropper': function (e) {
  //   //   console.log(e.type, e.x, e.y, e.width, e.height, e.rotate, e.scaleX, e.scaleY);
  //   // },
  //   // 'zoom.cropper': function (e) {
  //   //   console.log(e.type, e.ratio);
  //   // }
  // }).cropper(options);


  // Buttons
  // if (!$.isFunction(document.createElement('canvas').getContext)) {
  //   $('button[data-method="getCroppedCanvas"]').prop('disabled', true);
  // }

  // if (typeof document.createElement('cropper').style.transition === 'undefined') {
  //   $('button[data-method="rotate"]').prop('disabled', true);
  //   $('button[data-method="scale"]').prop('disabled', true);
  // }


  // // Download
  // if (typeof $download[0].download === 'undefined') {
  //   $download.addClass('disabled');
  // }


  // Options
  // $('.docs-toggles').on('change', 'input', function () {
  //   var $this = $(this);
  //   var name = $this.attr('name');
  //   var type = $this.prop('type');
  //   var cropBoxData;
  //   var canvasData;

  //   if (!$image.data('cropper')) {
  //     return;
  //   }

  //   if (type === 'checkbox') {
  //     options[name] = $this.prop('checked');
  //     cropBoxData = $image.cropper('getCropBoxData');
  //     canvasData = $image.cropper('getCanvasData');

  //     options.built = function () {
  //       $image.cropper('setCropBoxData', cropBoxData);
  //       $image.cropper('setCanvasData', canvasData);
  //     };
  //   } else if (type === 'radio') {
  //     options[name] = $this.val();
  //   }

  //   $image.cropper('destroy').cropper(options);
  // });

$('.docs-buttons').on('click', '[data-method]', function () {
    var $this = $(this);
    var data = $this.data();
    var $target;
    var result;

    if ($this.prop('disabled') || $this.hasClass('disabled')) {
      return;
    }

    if ($image.data('cropper') && data.method) {
      data = $.extend({}, data); // Clone a new one

      if (typeof data.target !== 'undefined') {
        $target = $(data.target);

        if (typeof data.option === 'undefined') {
          try {
            data.option = JSON.parse($target.val());
          } catch (e) {
            console.log(e.message);
          }
        }
      }

      

      result = $image.cropper(data.method, data.option, data.secondOption);

      
      switch (data.method) {
        

        case 'getCroppedCanvas':
          if (result) {

            // Bootstrap's Modal
            // $('#getCroppedCanvasModal').modal().find('.modal-body').html(result);
            // $download.attr('href', result.toDataURL('image/jpeg'));

            $('#getCroppedCanvasModal').modal().find('.modal-body').html('<img src="'+result.toDataURL('image/jpeg')+'"/>')

            if (!$download.hasClass('disabled')) {
              $download.attr('href', result.toDataURL('image/jpeg'));
            }
          }

          break;
      }

      if ($.isPlainObject(result) && $target) {
        try {
          $target.val(JSON.stringify(result));
        } catch (e) {
          console.log(e.message);
        }
      }

    }
  });


  // Methods
  // $('.docs-buttons').on('click', '[data-method]', function () {
  //   var $this = $(this);
  //   var data = $this.data();
  //   var $target;
  //   var result;

  //   if ($this.prop('disabled') || $this.hasClass('disabled')) {
  //     return;
  //   }

  //   if ($image.data('cropper') && data.method) {
  //     data = $.extend({}, data); // Clone a new one

  //     if (typeof data.target !== 'undefined') {
  //       $target = $(data.target);

  //       if (typeof data.option === 'undefined') {
  //         try {
  //           data.option = JSON.parse($target.val());
  //         } catch (e) {
  //           console.log(e.message);
  //         }
  //       }
  //     }

  //     if (data.method === 'rotate') {
  //       $image.cropper('clear');
  //     }

  //     result = $image.cropper(data.method, data.option, data.secondOption);

  //     if (data.method === 'rotate') {
  //       $image.cropper('crop');
  //     }

  //     switch (data.method) {
  //       case 'scaleX':
  //       case 'scaleY':
  //         $(this).data('option', -data.option);
  //         break;

  //       case 'getCroppedCanvas':
  //         if (result) {

  //           // Bootstrap's Modal
  //           // $('#getCroppedCanvasModal').modal().find('.modal-body').html(result);
  //           // $download.attr('href', result.toDataURL('image/jpeg'));

  //           $('#getCroppedCanvasModal').modal().find('.modal-body').html('<img src="'+result.toDataURL('image/jpeg')+'"/>')

  //           if (!$download.hasClass('disabled')) {
  //             $download.attr('href', result.toDataURL('image/jpeg'));
  //           }
  //         }

  //         break;
  //     }

  //     if ($.isPlainObject(result) && $target) {
  //       try {
  //         $target.val(JSON.stringify(result));
  //       } catch (e) {
  //         console.log(e.message);
  //       }
  //     }

  //   }
  // });


  // // Keyboard
  // $(document.body).on('keydown', function (e) {

  //   if (!$image.data('cropper') || this.scrollTop > 300) {
  //     return;
  //   }

  //   switch (e.which) {
  //     case 37:
  //       e.preventDefault();
  //       $image.cropper('move', -1, 0);
  //       break;

  //     case 38:
  //       e.preventDefault();
  //       $image.cropper('move', 0, -1);
  //       break;

  //     case 39:
  //       e.preventDefault();
  //       $image.cropper('move', 1, 0);
  //       break;

  //     case 40:
  //       e.preventDefault();
  //       $image.cropper('move', 0, 1);
  //       break;
  //   }

  // });


  // // Import image
  // var $inputImage = $('#inputImage');
  // var URL = window.URL || window.webkitURL;
  // var blobURL;

  // if (URL) {
  //   $inputImage.change(function () {
  //     var files = this.files;
  //     var file;

  //     if (!$image.data('cropper')) {
  //       return;
  //     }

  //     if (files && files.length) {
  //       file = files[0];

  //       if (/^image\/\w+$/.test(file.type)) {
  //         blobURL = URL.createObjectURL(file);
  //         $image.one('built.cropper', function () {

  //           // Revoke when load complete
  //           URL.revokeObjectURL(blobURL);
  //         }).cropper('reset').cropper('replace', blobURL);
  //         $inputImage.val('');
  //       } else {
  //         window.alert('Please choose an image file.');
  //       }
  //     }
  //   });
  // } else {
  //   $inputImage.prop('disabled', true).parent().addClass('disabled');
  // }

});
